<template>
  <div class="app-container">
    <el-row class="mb8" >
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="TableData">
      <el-table-column label="常用值" align="center" prop="normalCode">
        <template slot-scope="{ row }">
          <el-input v-model="row.normalCode" class="edit-input" size="small" />
        </template>
      </el-table-column>
      <el-table-column label="顺序" align="center" prop="displayOrder">
        <template slot-scope="{ row }">
          <el-input
            v-model="row.displayOrder"
            class="edit-input"
            size="small"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "TableData",
  props: {
    detailItems: {
      type: Array,
      default: () => [{}],
    },
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表格数据
      TableData: [...this.detailItems],
    };
  },
  methods: {
    // 新增一列
    handleAdd() {
      this.TableData.unshift({});
    },
  },
};
</script>

<style>
</style>
